<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #select1 {
        width: 200px;
        height: 300px;
    }
    #select2{
        width: 200px;
        height: 300px;
    }
    #right{
       display: block;
        position: relative;
        left: 30px;
    }
    #right_all{
        position: relative;
        left: 30px;
    }
    #container1{
        width: 200px;
        height: 340px;
        padding: 0px;
        position: absolute;
        top: 8px;
        left: 0px;
    }
    #container2{
        position: relative;
        top: 0px;
        left: 200px;
    }
    #left {
        display: block;
        position: relative;
        left: 30px;
    }
    #left_all{
        position: relative;
        left: 30px;
    }
</style>
<body>
<div id="container1">
    <select multiple="multiple" name="" id="select1">
        <option value="1">选项1</option>
        <option value="2">选项2</option>
        <option value="3">选项3</option>
        <option value="4">选项4</option>
        <option value="5">选项5</option>
        <option value="6">选项6</option>
        <option value="7">选项7</option>
    </select>
    <button id="right">选中添加到右边》》</button>
    <br>
    <button id="right_all">全部添加到右边》》</button>
</div>
<div id="container2">
    <select multiple="multiple" name="" id="select2">
        <option value="8">选项8</option>
        <option value="9">选项9</option>
    </select>
    <button id="left">《《选中添加到左边</button>
    <br>
    <button id="left_all">《《全部添加到左边</button>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("#right").on("click",function () {
            $("#select1 option:selected").appendTo("#select2")
            }
        )
        $("#left").on("click",function () {
            $("#select2 option:selected").appendTo("#select1")
        })
        $("#right_all").on("click",function () {
            $("#select1 option").appendTo("#select2")
        })
        $("#left_all").on("click",function () {
            $("#select2 option").appendTo("#select1")
        })
        $("#select1").on("dblclick",function () {
            $("#select1 option:selected").appendTo("#select2")
        })
        $("#select2").on("dblclick",function () {
            $("#select2 option:selected").appendTo("#select1")
        })

    })
</script>
</body>
</html>




















































































